<template>
    <main-header />
    <search-view :searchItem="searchItem" :loading="loading" @search="handleFinish"></search-view>
    <table-tool
        title="用户列表"
        :data="userList"
        v-model:columns="columns"
        :loading="loading"
        @reFresh="getUserList"
        @handleAdd="addFn"
        isExport
    >
        <template #content="{ column, text, record }">
            <template v-if="column && column.dataIndex === 'avatar_url'">
                <a-avatar :src="text" />
            </template>
            <template v-if="column && column.dataIndex === 'is_locked'">
                <a-switch
                    v-model:checked="record.is_locked"
                    checked-children="启"
                    un-checked-children="禁"
                    @change="lockChange(record)"
                />
            </template>
            <template v-if="column && column.dataIndex === 'operation'">
                <a-button type="link" @click="editFn(record)">编辑</a-button>
            </template>
        </template>
    </table-tool>
    <table-pagination
        v-show="total > 0"
        @pagination="getUserList"
        v-model:page="searchForm.current"
        v-model:pageSize="searchForm.pageSize"
        :total="total"
    />
    <!-- 修改增加的弹窗 -->
    <a-modal
        v-model:visible="visible"
        :title="!isEdit ? '增加用户' : '修改用户'"
        :footer="false"
        @cancel="resetUserForm"
    >
        <a-form :model="userForm" ref="userFormRef" layout="vertical" @finish="userFormFinish">
            <a-form-item
                name="name"
                label="用户名"
                :rules="[{ required: true, message: '请输入用户名' }]"
            >
                <a-input
                    v-model:value="userForm.name"
                    allow-clear
                    placeholder="请输入用户名"
                ></a-input>
            </a-form-item>
            <a-form-item
                name="email"
                label="邮箱"
                :rules="[
                    { required: true, message: '请输入邮箱' },
                    { type: 'email', message: '请注意格式' }
                ]"
            >
                <a-input
                    v-model:value="userForm.email"
                    allow-clear
                    placeholder="请输入邮箱"
                ></a-input>
            </a-form-item>
            <a-form-item
                v-if="!isEdit"
                name="password"
                label="密码"
                :rules="[
                    { required: true, message: '请输入密码' },
                    { min: 6, message: '最小长度为6' }
                ]"
            >
                <a-input-password
                    allow-clear
                    v-model:value="userForm.password"
                    placeholder="请输入密码"
                ></a-input-password>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit">{{
                    !isEdit ? '增加' : '修改'
                }}</a-button>
                <a-button style="margin-left: 10px" @click="resetUserForm">重置</a-button>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup>
import { onMounted, reactive, ref, getCurrentInstance } from 'vue'
import { getUserListAPI, getUserInfoAPI, editUserAPI, addUserAPI, lockUserAPI } from '@/api/user.js'
const { proxy: _this } = getCurrentInstance()
//检索的表单
const searchForm = reactive({
    current: 1,
    pageSize: 10
})
const search = ref({})
const searchItem = ref([
    {
        label: '姓名',
        name: 'name',
        type: '0'
    },
    {
        label: '邮箱',
        name: 'email',
        type: '0'
    }
])
//检索 重置
const handleFinish = (value) => {
    searchForm.current = 1
    searchForm.pageSize = 10
    search.value = value
    getUserList()
}
//用户列表数据
const userList = ref([])
let columns = ref([
    {
        title: '头像',
        dataIndex: 'avatar_url'
    },
    {
        title: '姓名',
        dataIndex: 'name'
    },
    {
        title: '邮箱',
        dataIndex: 'email'
    },
    {
        title: '是否禁用',
        dataIndex: 'is_locked'
    },
    {
        title: '创建时间',
        dataIndex: 'created_at'
    },
    {
        title: '操作',
        dataIndex: 'operation'
    }
])
let total = ref(0)
const loading = ref(false)
//获取数据列表的方法
const getUserList = async () => {
    loading.value = true
    const res = await getUserListAPI({ ...searchForm, ...search.value })
    res.data.forEach((item) => {
        item.is_locked = item.is_locked ? false : true
    })
    userList.value = res.data
    total.value = res.meta.pagination.total
    loading.value = false
}
onMounted(() => {
    getUserList()
})
//弹窗部分
const visible = ref(false)
const isEdit = ref(false)
const userFormRef = ref()
const editId = ref('')
let userForm = ref({
    name: '',
    email: '',
    password: ''
})
const editFn = (row) => {
    isEdit.value = true
    getUserInfoAPI(row.id).then((res) => {
        visible.value = true
        userForm.value = { ...res }
    })
}
const addFn = () => {
    isEdit.value = false
    visible.value = true
}
//重置表单
const resetUserForm = () => {
    userForm.value = {}
    userFormRef.value.resetFields()
}
//提交
const userFormFinish = (value) => {
    isEdit.value ? onEdit(value) : onAdd(value)
}
//修改
const onEdit = (value) => {
    editUserAPI(userForm.value.id, value)
        .then((res) => {
            _this.$message.success('修改成功')
            visible.value = false
            getUserList()
        })
        .catch((err) => {
            _this.$message.success('修改失败')
        })
}
//新增
const onAdd = (value) => {
    addUserAPI(value)
        .then((res) => {
            _this.$message.success('新增成功')
            visible.value = false
            getUserList()
        })
        .catch((err) => {})
}
const lockChange = (v) => {
    lockUserAPI(v.id).then((res) => {})
}
</script>
<style scoped lang="scss">
.search-form {
    .ant-form-item {
        width: 30%;
    }
    .btn-tool {
        text-align: right;
    }
}
</style>
